<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框(图片选择)案例</title>

    <link rel="stylesheet" href="css/mpwx/base.css?18">
    <link rel="stylesheet" href="css/mpwx/lib.css?18">
    <link rel="stylesheet" href="css/mpwx/css2.css?18">
    <link rel="stylesheet" href="css/mpwx/index.ssss.css">
    <link rel="stylesheet" href="css/mpwx/tooltip.css">
    <link rel="stylesheet" href="css/mpwx/richvideo.css">
    <style>
        .modal-mask {
            position: fixed;
            z-index: 9998;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: table;
            transition: opacity .3s ease;
        }

        .modal-wrapper {
            display: table-cell;
            vertical-align: middle;
        }

        .modal-container {
            width: 300px;
            margin: 0px auto;
            padding: 20px 30px;
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
            transition: all .3s ease;
            font-family: Helvetica, Arial, sans-serif;
        }

        .modal-header h3 {
            margin-top: 0;
            color: #42b983;
        }

        .modal-body {
            margin: 20px 0;
        }

        .modal-default-button {
            float: right;
        }

        /*
         * The following styles are auto-applied to elements with
         * transition="modal" when their visibility is toggled
         * by Vue.js.
         *
         * You can easily play with the modal transition by editing
         * these styles.
         */

        .modal-enter {
            opacity: 0;
        }

        .modal-leave-active {
            opacity: 0;
        }

        .modal-enter .modal-container,
        .modal-leave-active .modal-container {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

    </style>
</head>
<body>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
    <transition name="modal">
        <div class="modal-mask">
            <div class="dialog_wrp img_dialog_wrp ui-draggable" style="width: 846px; margin-left: -423px; margin-top: -290px;">
                <div class="dialog">
                    <div class="dialog_hd">
                        <h3>选择图片</h3>
                        <a href="javascript:;" @click="$emit('close')" class="icon16_opr closed pop_closed">关闭</a>

                    </div>
                    <div class="dialog_bd"><div class="img_pick_panel inner_container_box side_l cell_layout">
                        <div class="inner_side">
                            <div class="group_list">
                                <div class="inner_menu_box">
                                    <dl class="inner_menu js_group">
                                        <dd id="js_group0" class="inner_menu_item js_groupitem"
                                            :class="{ selected:selectedgroup == -1}"
                                            data-groupid="0">
                                            <a href="javascript:;" class="inner_menu_link" title="全部图片" @click = "changeGroup(-1)">
                                                <strong>全部图片</strong><em class="num">(<span>2</span>)</em>
                                            </a>
                                        </dd>

                                        <template v-for="(g,index) in groups">
                                            <dd id="js_group1" class="inner_menu_item js_groupitem"
                                                :class = "{selected:selectedgroup==index}"
                                                :data-groupid="g.id">
                                                <a href="javascript:;" class="inner_menu_link" title="g.name" @click = "changeGroup(index)">
                                                    <strong v-text="g.name"></strong><em class="num">(<span v-text="g.count"></span>)</em>
                                                </a>
                                            </dd>
                                        </template>
                                    </dl>

                                </div>
                            </div>
                        </div>
                        <div class="inner_main">
                            <div class="img_pick_area">

                                <div class="img_pick_area_inner">
                                    <div class="img_pick">
                                        <i class="icon_loading_small white js_loading" style="display: none;"></i>
                                        <ul class="group js_list img_list">

                                            <template v-for="(pic,index) in picturesVal">
                                                <li class="img_item js_imageitem" data-id="100000003" data-url="pic.src" data-oristatus="0" data-format="jpeg">
                                                    <label class="frm_checkbox_label img_item_bd "
                                                           @click = "selectedVal = index"
                                                           :class = "{selected:selectedVal == index}">
                                                        <div class="pic_box">
                                                            <img class="pic js_pic" data-src="pic.path" :src="pic.path" style="width: 117px;">
                                                        </div>
                                                        <span class="lbl_content" v-text="pic.title"></span>
                                                        <div class="selected_mask">
                                                            <div class="selected_mask_inner"></div>
                                                            <div class="selected_mask_icon"></div>
                                                        </div>
                                                    </label>
                                                </li>
                                            </template>
                                        </ul>
                                    </div>
                                    <div id="js_pagebar" class="pagination_wrp pageNavigator">
                                        <div id="wxPagebar_1480578839079" class="pagination">
                                            <span class="page_nav_area"><a href="javascript:void(0);" class="btn page_prev"><i class="arrow"></i></a><span class="page_num"><label v-text="currentPageIndex"></label><span class="num_gap">/</span><label>3</label></span><a href="javascript:void(0);" class="btn page_next"><i class="arrow"></i></a></span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <p class="dialog_ft_desc">已选<span class="js_selected">0</span>个，可选1个</p>
                    </div></div>

                    <div class="dialog_ft">

                        <span
                                :class="{btn_disabled:selectedVal <0}"
                                class="btn btn_primary btn_input js_btn_p"><button @click="confirmSelection" type="button" class="js_btn" data-index="0">确定</button></span>
                        <span class="btn btn_default btn_input js_btn_p"><button @click="$emit('close')" type="button" class="js_btn" data-index="1">取消</button></span>

                    </div>

                </div>
            </div>

        </div>
    </transition>
</script>

<!-- app -->
<div id="app">
    <button id="show-modal" @click="showModal = true">Show Modal</button>
    <!-- use the modal component, pass in the prop -->
    <modalpic v-if="showModal"
           @close="showModal = false"
           @loadg=""
           @confirm = "confirmSelectX"
           :pictures = "pics"
           :selected="-1"
           :groups="groups"
           :source="imageurl">

    </modalpic>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/vue.js"></script>
<script>
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    // register modal component
    Vue.component('modalpic', {
        template: '#modal-template',
        props:['pictures','selected','source','groups'],
        data:function(){
            return {
                selectedgroup:-1,
                selectedVal:this.selected,
                dataUrl:this.source,
                picturesVal:this.pictures,
                currentPageIndex:1
            }
        },
        methods:{

            changeGroup:function(_gid){
                    var _s=this;
                     _s.selectedgroup = _gid;
                     _s.loadImageList(_gid,_s.currentPageIndex);
            },
            loadImageList:function(_gid,_page){
                var _s=this;
                axios({
                    url:_s.dataUrl,
                    data:{
                        groupid:_gid,
                        pageindex:_page
                    },
                    method: 'get'
                }).then(function(response){

                    if(response.status !=200){
                        return;
                    }
                    _s.picturesVal = response.data.rows;
                    _s.selectedVal = -1;

                }).catch(function (error) {
                    console.log(error);
                });
            },
            confirmSelection:function(){
                if(this.selectedVal<0){ //当前没有那啥
                    return;
                }
                this.$emit("confirm",this.selectedgroup,this.selectedVal);
                this.$emit('close');
            }
        },
        watch:{

            pictures:function(val){
                this.picturesVal = val;
            }
        }
    });

    // start app
  var vm =  new Vue({
        el: '#app',
        data: function(){

            return {
                groupurl:'servers/groups.php',
                imageurl:'servers/pic.php',
                showModal: false,
                pics:[],
                groups:[]
            };
        },
      methods:{
            loadgroup:function(){
                var _s=this;
                axios({
                    url:_s.groupurl,
                    method: 'get'
                }).then(function(response){
                    if(response.status !=200){
                        console.log(response.statusText);
                        return;
                    }
                    _s.groups = response.data.rows;

                }).catch(function (error) {
                    console.log(error);
                });

            },
            ///这里的默认加载全部即可
            loadImageList:function(_gid,_page){
              var _s=this;

              axios({
                  url:_s.imageurl,
                  data:{
                      groupid:_gid,
                      pageindex:_page
                  },
                  method: 'get'
              }).then(function(response){

                  if(response.status !=200){
                      console.log(response.statusText);
                      return;
                  }
                  _s.pics = response.data.rows;


              }).catch(function (error) {
                  console.log(error);
              });
          },
            confirmSelectX:function(gid,pid){
                console.log("当前选中组:",gid,"当前选中图片:",pid);
             }
      },
      watch:{
          showModal:function(val){
              if(val == true){
                  this.loadImageList();
              }
          }

      }
    });
  vm.loadgroup();
</script>
</body>
</html>